<template>
  <page-layout
    ref="formRef"
    v-model:page="queryParams.page"
    v-model:pageSize="queryParams.pageSize"
    :tableData="tableData"
    :loading="loading"
    :total="total"
    :formModel="queryParams"
    @search="search"
    @reset="reset"
    @fetchData="search"
  >
    <template #header>
      <el-form-item prop="酒店名称">
        <el-input
          v-model="queryParams.酒店名称"
          placeholder="请输入酒店名称"
          clearable
          @change="query"
        ></el-input>
      </el-form-item>
      <el-form-item prop="manager">
        <el-select
          v-model="queryParams.manager"
          placeholder="请选择供应商"
          @change="query"
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item['value']"
            :label="item['label']"
            :value="item['value']"
          ></el-option>
        </el-select>
      </el-form-item>
    </template>
    <template #action>
      <el-button @click="exportData">导出</el-button>
    </template>
    <template #bodyColumn>
      <el-table-column
        label="ID"
        prop="id"
        min-width="100"
        align="left"
      ></el-table-column>
      <el-table-column
        label="酒店名称"
        prop="hotel"
        min-width="120"
        align="left"
      ></el-table-column>
      <el-table-column label="操作" prop="undefined" min-width="150" align="left">
        <template #default="{ row }"></template>
      </el-table-column>
    </template>
  </page-layout>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'

type IFormRef = {
  ruleFormRef: FormInstance
}
// 检索参数
const queryParams = reactive({
  酒店名称: '',
  manager: '',
  page: 1,
  pageSize: 20
})

const tableData = ref([]) // 表数据
const total = ref(0)
const loading = ref(false)
const formRef = ref<IFormRef>()
// 数据查询
const search = () => {}
search()

// 检索
const query = () => {
  queryParams.page = 1
  search()
}
// 重置
const reset = () => {
  formRef.value?.ruleFormRef.resetFields()
  queryParams.page = 1
  queryParams.pageSize = 20
  search()
}

const options = []
// 导出
const exportData = () => {}
</script>
